<template>
	<view class="content with-tabbar">
		<div v-if="resumeList.length < 1" class="flex-center resumeItem mb-20 lh-70" @click="uploadSent">
			<div>上传简历</div>
			<div class="iconfont icon-youjiantou ml-auto"></div>
		</div>
		<!-- <input type="file" @change="upload" placeholder="上传文件" /> -->
		<div v-if="resumeList.length < 1" class="fontS24 color-6d">请上传DOC、DOCX、PDF格式的中文简历，大小不超过20M</div>
		<scroll-view class="mt-10" v-if="resumeList.length > 0"
			style="white-space: normal;height: calc(100vh - 300upx);" scroll-y>
			<div class="flex-center resumeItem mb-20" v-for="(item, index) in resumeList" :key="index">
				<image class="resumeIcon" v-if="item.fileExtension === 'docx'"
					src="https://xingangtong.oss-cn-beijing.aliyuncs.com/common/docx%402x.png" mode="asspectFill" />
				<image class="resumeIcon" v-if="item.fileExtension === 'doc'"
					src="https://xingangtong.oss-cn-beijing.aliyuncs.com/common/doc%402x.png" mode="asspectFill" />
				<image class="resumeIcon" v-if="item.fileExtension === 'pdf'"
					src="https://xingangtong.oss-cn-beijing.aliyuncs.com/common/Pdf%402x.png" mode="asspectFill" />
				<div class="ml-36" style="width: calc(100% - 150upx);">
					<div class="fontE1 color-3 fontS30 font-500">{{ item.fileName }}</div>
					<div class="flex-center lh-44 fontS24 color-6 mt-12">{{ item.fileSize }} 更新于{{ item.createTime }}
					</div>
				</div>
				<div class="iconfont icon-shanchu font-bold ml-auto pl-20" @click="deleteBtn(item, index)"></div>

			</div>
			<div class="bg-fff pt-18 pb-18 pl-30 pr-30 lh-50 text-center bor-r16"
				:class="resumeList.length < 3 ? 'bg-fff' : 'bg-f7 color-fff'"
				@click="resumeList.length < 3 ? uploadSent() : uploadOther()">
				继续上传（{{ resumeList.length }}/3）</div>

		</scroll-view>



	</view>
</template>

<script>
import { getResumeElectronic, delResumeElectronic, addResumeElectronic } from '@/api/resume'
const ossUploadFile = require("@/utils/ossupload/upload").ossUploadFile;
const api = require("@/api/api.js").api;

export default {
	computed: {
		userInfo() {
			console.log(this.$store.getters.userInfo)
			return this.$store.getters.userInfo || {};
		},
	},
	data() {
		return {
			baseUrl: getApp().globalData.baseUrl,
			postForm: {

			},

			resumeList: [],

		}
	},
	async onLoad(options) {
		await this.getResumeList()
	},
	methods: {
		uploadOther() {
			uni.showToast({ title: '最多上传3个附件简历', icon: 'none' })
		},
		async uploadSent() {
			let _this = this;
			uni.chooseMessageFile({
				count: 3 - this.resumeList.length, // 默认选择一个文件
				extension: ['doc', 'docx', 'pdf'], // 限制只能选择DOC文件
				type: 'file',
				success: (res) => {
					console.log(res)
					for (let i = 0; i < res.tempFiles.length; i++) {
						if (['doc', 'docx', 'pdf'].includes(res.tempFiles[i].name.split('.').pop())) {
							_this.upload(res.tempFiles[i])

						} else {
							uni.showToast({ title: '仅支持doc,docx,pdf格式的文件', icon: 'none' });
						}
					}

				},
				fail: (err) => {
					console.error('选择文件失败', err);
				}
			});
		},
		async upload(path) {
			let data = { type: 10 };
			data.filePath = path.path;
			ossUploadFile.ossUploadFile(data, async (res) => {


				const resInfo = await addResumeElectronic({
					fileExtension: res.fileName.split('.')[res.fileName.split('.').length - 1],
					fileName: path.name,
					fileSize: Math.ceil(path.size / 1024),
					fileSizeUnit: 'KB',
					fileUrl: res.fileName,
					userId: this.userInfo.userId
				})
				await this.getResumeList()
			}, async (error) => {
				console.log(error)

			})
		},


		async getResumeList() {
			const { rows } = await getResumeElectronic()
			this.resumeList = rows
		},

		async deleteBtn(item, index) {
			let _this = this;
			uni.showModal({
				content: `确定要删除${item.fileName}吗？`,
				confirmColor: '#3CC51F', // 确定按钮的文字颜色，默认为"#3CC51F"
				success: async function (res) {
					if (res.confirm) {
						const { data } = await delResumeElectronic(item.id)
						_this.resumeList.splice(index, 1)
					} else if (res.cancel) {
						console.log('用户点击了取消按钮');
					}
				}
			})


		},



	}
}
</script>

<style lang="less" scoped>
.content {
	display: flex;
	background: #f7f7f7;
	flex-direction: column;

	padding: 20upx;
	// text-align: center;
	height: 100vh;
	overflow: hidden;

}

.title {
	font-size: 20px;
	font-weight: bold;
	margin-bottom: 20px;
}

.resume-box {
	.resume-title {
		width: 200upx;
	}

	.form-cnt {
		width: calc(100% - 240upx);

	}

	.form-cnt1 {
		width: 100%;

		textarea {
			width: 100%;
			line-height: 50upx;
			text-align: justify;
		}

	}

	.resume-input {
		width: calc(100% - 200upx);

		input {
			width: 100%;
			height: 50upx;
			line-height: 50upx;
		}
	}
}

.profession-cover {
	width: 100%;
	height: 100vh;
	position: fixed;
	left: 0;
	bottom: 0;
	background: rgba(0, 0, 0, .3);
	z-index: 888888;
}

.profession-box {
	bottom: 0;
	left: 0;
	width: 100%;
	height: 600upx;
	background: #F7F7F7;
	position: fixed;
	z-index: 999999;

	.profession-left {
		width: 50%;
		text-align: center;
		background: #fff;


		div {
			line-height: 90upx;

			&.active {
				background: #F7F7F7;
			}

		}
	}

	.profession-right {
		background: #F7F7F7;
		width: 50%;
		padding-left: 20upx;

		div {
			line-height: 90upx;

		}

	}
}

.resumeItem {
	background: #fff;
	padding: 20upx 20upx;
	border-radius: 8rpx;

	.resumeIcon {
		width: 85upx;
		height: 100upx;
	}
}

.bottom {
	padding-bottom: calc(constant(safe-area-inset-bottom) + 22upx);
	/*兼容 IOS<11.2*/
	padding-bottom: calc(env(safe-area-inset-bottom) + 22upx);
	/*兼容 IOS>11.2*/
}

.color-0d0 {
	color: #0D0D12;
}

.bg-f7 {
	background: #CECECE !important;
}
</style>